package components

// Stars is between 0 and 10. It will be translated to a number of stars, e.g. 7 will be 3 full stars and 1 half star.
templ Stars(stars int) {
	<span id="stars" class="inline-flex items-baseline text-xs font-semibold">
		for i := 0; i < stars/2; i++ {
			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-yellow-500">
				<polygon fill="rgb(234,179,8)" points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
			</svg>
		}
		if stars%2 == 1 {
			<svg fill="none" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-yellow-500">
				<polygon fill="rgb(234,179,8)" points="12 2 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
				<polygon stroke="#D1D5DB" points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 12 2"></polygon>
			</svg>
		}
		for i := 0; i < (10-stars)/2; i++ {
			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="#D1D5DB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-yellow-500">
				<polygon fill="none" points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
			</svg>
		}
	</span>
}
